<template>
  <div class="disabled">
    <div class="btn">
      <el-button type="primary" round style="width: 300px;" @click="restore">恢复上一次保存</el-button>
      <el-button type="primary" round style="width: 300px;margin-right: 50px" @click="editContent">{{ btn }}</el-button>
    </div>
    <div class="tinymceT">
      <div v-show="show">
        <tinymce v-model="description" :height="850" />
      </div>
      <div v-show="!show">
        <div class="page_content" v-html="description" />
      </div>
    </div>
  </div>
</template>
<script>
import Tinymce from '@/components/ImcoderTinymce/index'
import axios from 'axios'
import FileSaver from 'file-saver'
export default {
  name: 'Index',
  components: {
    Tinymce
  },
  data() {
    return {
      description: '',
      btn: '编辑',
      show: false
    }
  },
  mounted() {
    const VUE_APP_BASE_PATH = process.env.VUE_APP_BASE_PATH
    axios.get(`${VUE_APP_BASE_PATH}/content.json`).then(res => {
      this.description = res.data.content
    })
  },
  methods: {
    editContent() {
      this.show = !this.show
      this.btn = this.show ? '保存' : '编辑'
      if (!this.show) {
        // 将json转换成字符串
        localStorage.setItem('SWAGGER_CONTENT', this.description)
        const jsonData = JSON.stringify({ content: this.description })
        const blob = new Blob([jsonData], { type: '' })
        FileSaver.saveAs(blob, `content.json`)
      }
    },
    restore() {
      this.description = localStorage.getItem('SWAGGER_CONTENT')
    }
  }
}
</script>

<style scoped>
.disabled {
  padding: 10px;
}

.btn {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
}

.tinymceT {
  height: 95vh;
  margin-right: 50px;
  overflow:scroll;
}
</style>
